<template>
  <div class="main">
    <div class="add">
      <el-button v-if="rightsButtons['edit']" type="infor" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
      style="width: 100%">
      <el-table-column prop="id" label="抽奖活动ID" width="180">
      </el-table-column>
      <el-table-column prop="luckDrawTitle" label="活动标题" width="180">
      </el-table-column>
      <el-table-column prop="actStartTime" label="开始时间">
        <template slot-scope="scope">
          {{format(new Date(scope.row.actStartTime))}}
        </template>
      </el-table-column>
      <el-table-column prop="actEndTime" label="结束时间">
        <template slot-scope="scope">
          {{format(new Date(scope.row.actEndTime))}}
        </template>
      </el-table-column>
      <el-table-column v-if="rightsButtons['open']" prop="usingFlag" label="是否启用">
        <template slot-scope="scope">
          <span>否</span>
          <el-switch active-color="#13ce66" v-model="scope.row.usingFlag == 1"
            @change="operator(scope.row.id, scope.row.usingFlag)"></el-switch>
          <span>是</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="btn-group">
            <el-button v-if="rightsButtons['edit']" type="primary" @click="edit(scope.row.id)">编辑</el-button>
            <el-button v-if="rightsButtons['record']" type="primary" @click="record(scope.row.id)">奖励记录</el-button>
            <el-button v-if="rightsButtons['del']" type="danger" @click="del(scope)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {
    luckDraw
  } from '@/api/activity/luckDraw'
  Date.prototype.format = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
  export default {
    data() {
      return {
        visible: false,
        ruleForm: [],
        tableData: [],
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      format(time) {
        return time.format('yyyy-MM-dd hh:mm:ss')
      },
      operator(id, flag) {
        luckDraw.luckDrawOpen({
          luckId: id,
          open: flag ? 0 : 1
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.getData()
            this.$message.success('操作成功！')
          } else {
            this.$message.error(res.message)
          }
        })
      },
      add() {
        this.$router.push({
          name: 'luckDrawIndexEdit',
          query: {
            type: 'add'
          }
        })
      },
      record(id) {
        this.$router.push({
          name: 'luckDrawIndexRecord',
          query: {
            luckId: id
          }
        })
      },
      edit(id) {
        this.$router.push({
          name: 'luckDrawIndexEdit',
          query: {
            luckId: id,
            type: 'edit'
          }
        })
      },
      getData() {
        luckDraw.luckDrawList({
          pageIndex: 1,
          pageSize: 10,
          platform: ''
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data
            console.log(this.tableData)
          }
        })
      },
      del(scope) {
        console.log(scope)
        this.$confirm('确认关闭？').then(_ => {
          luckDraw.delLuckDraw({
            luckId: scope.row.id
          }).then(res => {
            console.log(res)
            if (res.code == 200) {
              this.getData()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .add {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
    padding-right: 20px;
  }

  .btn-group {
    display: flex;
  }
</style>
